<template>
	<uv-picker
		ref="pickerRef"
		:columns="columns"
		keyName="label"
		@change="handleChange"
		@close="onClose"
		@confirm="onConfirm"
	></uv-picker>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

const pickerRef = ref();

const modelValue = defineModel("value");

const visible = defineModel("visible");

// 获取当前日期
const today = dayjs();

const futureWeek = [];

for (let i = 0; i <= 7; i++) {
	futureWeek.push(today.add(i, "day").format("YYYY-MM-DD"));
}

const columns = reactive([[], [], []]);

const [one, two, three] = toRefs(columns);

watch(
	() => visible.value,
	(val) => {
		if (val) {
			pickerRef.value.open();
			one.value = [
				{ label: "现在下单", value: today.format("YYYY-MM-DD HH:mm") },
				...futureWeek.map((i) => {
					return {
						label: `${dayjs(i).locale("zh-cn").format("dddd")} ${dayjs(i).format("MM月DD日")}`,
						value: i
					};
				})
			];
		} else {
			pickerRef.value.close();
		}
	}
);

function onClose() {
	visible.value = false;
}

function onConfirm(e) {
	const { value } = e;
	console.log(value);
	if (value[0].label == "现在下单") {
		modelValue.value = dayjs().format("YYYY-MM-DD HH:mm");
	} else {
		modelValue.value = `${value[0].value} ${value[1].value}:${value[2].value}`;
	}
}

function handleChange(e) {
	const { columnIndex, index, value } = e;
	if (columnIndex == 0) {
		if (value[0].label == "现在下单") {
			two.value = [];
			three.value = [];
		} else {
			if (value[0].value == today.format("YYYY-MM-DD")) {
				const temTwo = [];
				for (let i = today.get("hours") - 1; i < 23; i++) {
					const d = today.add(i + 1 - today.get("hours"), "hour");
					temTwo.push({ label: d.format("HH点"), value: d.format("HH") });
				}
				two.value = temTwo;
			} else {
				const temTwo = [];
				for (let i = -1; i < 24; i++) {
					const d = today.add(i + 1 - today.get("hours"), "hour");
					temTwo.push({ label: d.format("HH点"), value: d.format("HH") });
				}
				two.value = temTwo;
			}

			three.value = [
				{ label: "00", value: "00" },
				{ label: "10", value: "10" },
				{ label: "20", value: "20" },
				{ label: "30", value: "30" },
				{ label: "40", value: "40" },
				{ label: "50", value: "50" }
			];
		}
	}
}
</script>

<style lang="scss" scoped></style>
